<template>
	<view class="page-container">
		<view class="header">
			<view class="header-top">
				<view class="header-top-left">
					<u-icon name="arrow-left" color="#000" size="27" @click="onBack()"></u-icon>
				</view>
				<view class="header-top-right">
					<image src="/static/local-topicList/notice.png" mode=""></image>
				</view>
			</view>
			<view class="topicBox">
				<image src="@/static/local-circles/topic.png" mode=""></image>
			</view>

			<view class="header-top-imageTitle">
				<image src="/static/local-topicList/Topic-indicator.png" mode=""></image>
			</view>

			<view class="header-top-imageTitleUnder">
				话题热度排行榜 • 发现同城趣事
			</view>
		</view>



		<view class="footer">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper"
				@scrolltolower="lower" @scroll="scroll">
				<view class="footer-list" v-for="(item,index) in pageList" :key="index">
					<view class="footer-list-box-topLeft">
						<image v-if="index==0" src="/static/local-topicList/firstTag.png" mode=""></image>
						<image v-if="index==1" src="/static/local-topicList/secondTag.png" mode=""></image>
						<image v-if="index==2" src="/static/local-topicList/thirdTag.png" mode=""></image>
					</view>
					<view class="footer-list-box">
						<view class="footer-list-box-header">
							<view class="footer-list-box-header-left">
								<image :src="item.imgUrl" mode="aspectFill"></image>
							</view>
							<view class="footer-list-box-header-right-box">
								<view class="footer-list-box-header-right-box-top">
									<view class="footer-list-box-header-right-box-top-left">
										<view class="footer-list-box-header-right-box-top-left-imgBox">
											<image v-if="index==0" src="/static/local-topicList/firstGroup.png" mode="">
											</image>
											<image v-if="index==1" src="/static/local-topicList/secondGroup.png"
												mode="">
											</image>
											<image v-if="index==2" src="/static/local-topicList/thirdGroup.png" mode="">
											</image>
										</view>
										<view class="footer-list-box-header-right-box-top-left-content">
											{{item.title}}
										</view>
									</view>
									<u-icon name="arrow-right" color="#000" size="20"></u-icon>
								</view>
								<view class="footer-list-box-header-right-box-bottom">
									<view class="footer-list-box-header-right-box-bottom-imgBox">
										<image src="/static/local-topicList/eyes.png" mode=""></image>
									</view>
									<view class="footer-list-box-header-right-box-bottom-text">
										{{item.watchNum}}
									</view>
								</view>
							</view>
						</view>

						<view class="footer-list-box-footer">
							<view class="footer-list-box-footer-list" v-for="(info,infoIds) in item.comment"
								:key="infoIds">
								<view class="footer-list-box-footer-listBox">
									<view class="footer-list-box-footer-listBox-left">
										<view class="footer-list-box-footer-listBox-left-avatar">
											<image src="/static/logo.png" mode=""></image>
										</view>
										<view class="footer-list-box-footer-listBox-left-userName">
											{{info.userName}}
										</view>
										<view class="footer-list-box-footer-listBox-left-comment">
											{{info.userComment}}
										</view>
									<!-- 	<u-notice-bar class="footer-list-box-footer-listBox-left-comment" bgColor="#fff"
											color="#4D4D56" :text="info.userComment" icon=""></u-notice-bar> -->
									</view>
									<view class="footer-list-box-footer-listBox-right">
										<image src="/static/local-topicList/rightTag.png"></image>
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<u-loadmore status="nomore" />
				<view class="" style="height: 20rpx;"></view>
			</scroll-view>

		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				pageList: [{
						imgUrl: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
						title: '淮安人究竟有几款方言？',
						watchNum: '800+人围观',
						comment: [{
								userName: '圣夜碎冰',
								userComment: '老淮安话才是正宗淮安话！'
							},
							{
								userName: '吗不拉几',
								userComment: '没人觉得淮安话真的很难听吗？！'
							},
						]
					},
					{
						imgUrl: 'http://gips1.baidu.com/it/u=1658389554,617110073&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',
						title: '淮安哪家面条最正宗？',
						watchNum: '800+人围观',
						comment: [{
								userName: '小叶桔',
								userComment: '求求了，我真的怒推淮安这家面馆！求求了，我真的怒推淮安这家面馆！'
							},
							{
								userName: '创作小助手',
								userComment: '这几家藏在巷子里的淮安面馆...？！'
							}
						]
					},
					{
						imgUrl: 'https://gips2.baidu.com/it/u=1651586290,17201034&fm=3028&app=3028&f=JPEG&fmt=auto&q=100&size=f600_800',
						title: '各位刘亦菲，河下古镇汉服 店推荐哪家？',
						watchNum: '800+人围观',
						comment: [{
								userName: '王哈哈哈哈哈',
								userComment: '美死了！去河下古镇请认准...！'
							},
							{
								userName: '哈利',
								userComment: '避雷了~河下汉服店化妆技术真的很差'
							}
						]
					},
					{
						imgUrl: 'http://gips3.baidu.com/it/u=4283915297,3700662292&fm=3028&app=3028&f=JPEG&fmt=auto?w=1440&h=2560',
						title: '淮安人究竟有几款方言？',
						watchNum: '800+人围观',
						comment: [{
								userName: '圣夜碎冰',
								userComment: '老淮安话才是正宗淮安话！'
							},
							{
								userName: '吗不拉几',
								userComment: '没人觉得淮安话真的很难听吗？！'
							}
						]
					},
					{
						imgUrl: 'http://gips0.baidu.com/it/u=3822353666,2757632348&fm=3028&app=3028&f=JPEG&fmt=auto?w=720&h=1280',
						title: '淮安人究竟有几款方言？',
						watchNum: '800+人围观',
						comment: [{
								userName: '圣夜碎冰',
								userComment: '老淮安话才是正宗淮安话！'
							},
							{
								userName: '吗不拉几',
								userComment: '没人觉得淮安话真的很难听吗？！'
							}
						]
					},
					{
						imgUrl: 'http://gips1.baidu.com/it/u=1410005327,4082018016&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
						title: '淮安人究竟有几款方言？',
						watchNum: '800+人围观',
						comment: [{
								userName: '圣夜碎冰',
								userComment: '老淮安话才是正宗淮安话！'
							},
							{
								userName: '吗不拉几',
								userComment: '没人觉得淮安话真的很难听吗？！'
							}
						]
					},
					{
						imgUrl: 'http://gips1.baidu.com/it/u=1573319441,2432408369&fm=3028&app=3028&f=JPEG&fmt=auto?w=1024&h=1024',
						title: '淮安人究竟有几款方言？',
						watchNum: '800+人围观',
						comment: [{
								userName: '圣夜碎冰',
								userComment: '老淮安话才是正宗淮安话！'
							},
							{
								userName: '吗不拉几',
								userComment: '没人觉得淮安话真的很难听吗？！'
							}
						]
					},
					{
						imgUrl: 'http://gips3.baidu.com/it/u=775223787,1959096310&fm=3028&app=3028&f=JPEG&fmt=auto?w=1440&h=2560',
						title: '淮安人究竟有几款方言？',
						watchNum: '800+人围观',
						comment: [{
								userName: '圣夜碎冰',
								userComment: '老淮安话才是正宗淮安话！'
							},
							{
								userName: '吗不拉几',
								userComment: '没人觉得淮安话真的很难听吗？！'
							}
						]
					}
				]
			};
		},
		onLoad() {
			this.loadData(true);
		},
		onReachBottom() {
			this.loadData(false);
		},
		methods: {
			async loadData(isRefresh = false) {
				// const data = this.localCirclesData;
				// if (data.isLoading || (!isRefresh && data.loadStatus === 'nomore')) return;
				// data.isLoading = true;
				// data.loadStatus = 'loading';
				// if (isRefresh) {
				// 	data.page = 1;
				// 	data.exploreList = [];
				// 	data.hotTopics = this.localCirclesDataSource.hotTopics.slice(0, 10);
				// }
				// // 模拟异步请求
				// setTimeout(() => {
				// 	const start = (data.page - 1) * data.pageSize;
				// 	const end = start + data.pageSize;
				// 	const newItems = this.localCirclesDataSource.exploreList.slice(start, end);
				// 	if (newItems.length > 0) {
				// 		data.exploreList.push(...newItems);
				// 		data.page++;
				// 	}
				// 	if (data.exploreList.length >= this.localCirclesDataSource.exploreList.length) data
				// 		.loadStatus = 'nomore';
				// 	else data.loadStatus = 'loadmore';
				// 	data.isLoading = false;
				// }, 800);

			},
			onBack() {
				uni.navigateBack();
			},
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}

		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		height: 100vh;
		overflow: hidden; // 隐藏超出部分

		.header {
			background-image: url("/static/local-topicList/background.png");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			position: relative;
			// background: linear-gradient(to bottom, #FFE397, #fff);
			// background: linear-gradient(to bottom left,
			// 		#FFE397 0%,
			// 		#FFE397 15%,
			// 		#FFE397 0%, // 添加过渡色
			// 		#FFF 50%,
			// 		#FFF 100%);
			height: 450rpx;
			padding-top: 84rpx;
			padding-bottom: 40rpx;

			.header-top {
				margin: 0 27rpx;
				display: flex;
				justify-content: space-between;

				.header-top-left {
					height: 56rpx;
					display: flex;

					.header-top-left-image {
						width: 44rpx;
						height: 44rpx;
					}

					.header-top-left-titleImage {
						margin-left: 10rpx;
						width: 200rpx;
						height: 56rpx;
					}
				}

				.header-top-right {
					width: 36rpx;
					height: 36rpx;
					margin: 10rpx 0;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}

			.topicBox {
				width: 222rpx;
				height: 222rpx;
				position: absolute;
				top: 150rpx;
				right: 64rpx;
				z-index: 10;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.header-top-imageTitle {
				width: 376rpx;
				height: 78rpx;
				position: absolute;
				top: 176rpx;
				left: 32rpx;
				z-index: 10;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.header-top-imageTitleUnder {
				width: 376rpx;
				height: 78rpx;
				position: absolute;
				top: 274rpx;
				left: 32rpx;
				z-index: 10;
				font-size: 26rpx;
				font-weight: 400;
				line-height: 40rpx;
			}
		}

		.footer {
			height: calc(100vh - 354rpx);
			margin-top: -220rpx;

			.scroll-Y {
				height: 100%;
			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
			}

			.scroll-view-item {
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
			}

			.scroll-view-item_H {
				display: inline-block;
				width: 100%;
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;
			}

			.footer-list {
				margin: 0 32rpx 0 10rpx;
				height: 322rpx;
				overflow: hidden;
				position: relative;

				.footer-list-box-topLeft {
					width: 100rpx;
					height: 100rpx;
					position: absolute;
					top: 0;
					left: 0;
					z-index: 10;

					image {
						width: 100rpx;
						height: 100rpx;
					}
				}

				.footer-list-box {
					border: 1px solid #EDEEEF;
					border-radius: 30rpx;
					margin-top: 32rpx;
					margin-left: 22rpx;

					.footer-list-box-header {
						height: 120rpx;
						margin: 20rpx 30rpx;
						display: flex;

						.footer-list-box-header-left {
							width: 120rpx;
							height: 120rpx;

							image {
								border-radius: 20rpx;
								width: 120rpx;
								height: 120rpx;
							}
						}

						.footer-list-box-header-right-box {
							flex: 1;
							margin-left: 20rpx;
							height: 40rpx;
							margin-top: 16rpx;

							.footer-list-box-header-right-box-top {
								display: flex;
								justify-content: space-between;
								width: 508rpx;

								.footer-list-box-header-right-box-top-left {
									flex: 1;
									display: flex;
									height: 40rpx;
									min-width: 0; // 关键：允许flex项目收缩

									.footer-list-box-header-right-box-top-left-imgBox {
										width: 36rpx;
										height: 36rpx;
										margin-top: 4rpx;
										flex-shrink: 0; // 防止图片被压缩

										image {
											width: 36rpx;
											height: 36rpx;
										}
									}

									.footer-list-box-header-right-box-top-left-content {
										font-size: 30rpx;
										font-weight: 900;
										line-height: 40rpx;
										flex: 1; // 占据剩余空间
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										margin: 0 10rpx;
										min-width: 0; // 关键：允许文本容器收缩
									}
								}
							}
						}

						.footer-list-box-header-right-box-bottom {
							height: 40rpx;
							margin: 8rpx 0 16rpx 0;
							display: flex;

							.footer-list-box-header-right-box-bottom-imgBox {
								width: 30rpx;
								height: 30rpx;
								margin: 4rpx 3rpx 6rpx 3rpx;
								flex-shrink: 0; // 防止图片被压缩

								image {
									width: 30rpx;
									height: 30rpx;
								}
							}

							.footer-list-box-header-right-box-bottom-text {
								font-size: 26rpx;
								line-height: 40rpx;
								font-weight: 400;
								flex: 1; // 占据剩余空间
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								margin-left: 10rpx; // 与图片保持间距
							}
						}
					}

					.footer-list-box-footer {
						.footer-list-box-footer-list {
							margin: 0 24rpx 10rpx 30rpx;

							.footer-list-box-footer-listBox {
								display: flex;
								justify-content: space-between;
								height: 50rpx;

								.footer-list-box-footer-listBox-left {
									display: flex;
									align-items: center;
									flex: 1; // 占据剩余空间
									min-width: 0; // 允许子元素收缩
									.footer-list-box-footer-listBox-left-avatar {
										width: 50rpx;
										height: 50rpx;
										flex-shrink: 0; // 防止头像被压缩

										image {
											width: 50rpx;
											height: 50rpx;
											border-radius: 50%;
										}
									}

									.footer-list-box-footer-listBox-left-userName {
										height: 30rpx;
										line-height: 30rpx;
										color: #787882;
										font-size: 24rpx;
										font-weight: 500;
										margin: 0 18rpx;
										flex-shrink: 0; // 用户名不压缩
										white-space: nowrap;
									}

									.footer-list-box-footer-listBox-left-comment {
										height: 30rpx;
										line-height: 30rpx;
										color: #4D4D56;
										font-size: 26rpx;
										font-weight: 500;
										flex: 1; // 占据剩余空间
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										min-width: 0; // 允许收缩
										margin-right: 10rpx;
									}
								}

								.footer-list-box-footer-listBox-right {
									width: 30rpx;
									height: 50rpx;
									display: flex;
									align-items: center;
									flex-shrink: 0; // 防止右侧图标被压缩

									image {
										margin: 0 auto;
										width: 30rpx;
										height: 30rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>